<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- 设置页面的 基本路径，页面所有资源引入和页面的跳转全部基于 base路径 -->
    <base href="<%=basePath%>">
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,role-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="Bookmark" href="/favicon.ico">
    <link rel="Shortcut Icon" href="/favicon.ico"/>

    <script type="text/javascript" th:src="@{/lib/html5shiv.js}"></script>
    <script type="text/javascript" th:src="@{/lib/respond.min.js}"></script>


    <link rel="stylesheet" type="text/css" th:href="@{/h-ui/css/H-ui.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui.admin/css/H-ui.admin.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/lib/Hui-iconfont/1.0.8/iconfont.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui.admin/skin/default/skin.css}" id="skin"/>
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui.admin/css/style.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/lib/bootstrap/css/bootstrap.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/lib/bootstrap-table/bootstrap-table.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/lib/zTree/v3/css/zTreeStyle/zTreeStyle.css}"/>


    <script type="text/javascript" th:src="@{/lib/DD_belatedPNG_0.0.8a-min.js}"></script>
    <script>DD_belatedPNG.fix('*');</script>

    <title>添加角色-角色管理</title>
</head>
<body>
<article class="page-container">
    <div style="float: left;width: 60%;height:300px;">
        <form class="form form-horizontal" action="/logistics/role/saveOrUpdate" method="post" id="form-role-add">
            <input type="hidden" name="roleId" th:value=" ${role != null} ? ${role.roleId}">
            <input type="hidden" id="permissionIds" name="permissionIds" th:value=" ${role != null} ? ${role.permissionIds}">
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>角色名：</label>
                <div class="formControls col-xs-8 col-sm-7">
                    <input type="text" class="input-text" th:value=" ${role != null} ? ${role.rolename}"
                           placeholder="" id="rolename" name="rolename">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3">角色描述：</label>
                <div class="formControls col-xs-8 col-sm-7">
                    <textarea class="form-control" rows="3" name="remark"
                              th:text="${role != null} ? ${role.remark}"></textarea>
                </div>
            </div>

            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <input class="btn btn-primary radius"  type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
                </div>
            </div>
        </form>
    </div>
    <!--zTree-->
    <div style="float: left">
        <label>角色权限：</label>
        <ul id="menuTree" class="ztree"></ul>
    </div>

</article>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" th:src="@{/lib/jquery/1.11.3/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/lib/jquery.validation/1.14.0/jquery.validate.js}"></script>
<script type="text/javascript" th:src="@{/lib/jquery.validation/1.14.0/messages_zh.js}"></script>
<script type="text/javascript" th:src="@{/lib/jquery.validation/1.14.0/validate-methods.js}"></script>
<script type="text/javascript" th:src="@{/lib/layer/2.4/layer.js}"></script>
<script type="text/javascript" th:src="@{/h-ui/js/H-ui.min.js}"></script>
<script type="text/javascript" th:src="@{/h-ui.admin/js/H-ui.admin.js}"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" th:src="@{/lib/My97DatePicker/4.8/WdatePicker.js}"></script>
<script type="text/javascript" th:src="@{/lib/datatables/1.10.0/jquery.dataTables.min.js}"></script>
<script type="text/javascript" th:src="@{/lib/bootstrap-table/bootstrap-table.js}"></script>
<script type="text/javascript" th:src="@{/lib/bootstrap-table/bootstrap-table-zh-CN.min.js}"></script>
<script type="text/javascript" th:src="@{/lib/zTree/v3/js/jquery.ztree.all-3.5.min.js}"></script>

<!--zTree-->
<script type="text/javascript">

    var setting = {
        data: {
            simpleData: {
                enable: true,
                idKey: "permissionId",
                pIdKey: "parentId"
            },
            key: {
                name: "name",
                url: "xxx"
            }

        },
        check: {
            enable: true,
            chkStyle: "checkbox"
        },
        //异步加载用户菜单
        async: {
            enable: true,
            url: "/logistics/permission/getAllpermission" /*,
            dataFilter: ajaxDataFilter*/

        },
        callback: {
            onAsyncSuccess: zTreeOnAsyncSuccess
        }

    };

    //预处理
    /* function ajaxDataFilter(treeId, parentNode, responseData) {
         if (responseData) {
             for(var i =0; i < responseData.length; i++) {
                 responseData[i].open=true;
             }
         }
         return responseData;
     };*/

    function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {

        //修改数据回显菜单选中
        var strPIds=$("#permissionIds").val();

        //切割字符串
        var pids=strPIds.split(",")

        //获取zTree节点
        var treeObj = $.fn.zTree.getZTreeObj("menuTree");
        $.each(pids,function (index,permissionId) {
            var node = treeObj.getNodeByParam("permissionId", permissionId, null);
            treeObj.checkNode(node, true, false);
        })
    }
    //获取选择的节点
    $(document).ready(function () {
        $.fn.zTree.init($("#menuTree"), setting);
    });

</script>

<!--zTree业务-->
<script>
    function saveOrUpdate() {
        var treeObj = $.fn.zTree.getZTreeObj("menuTree");
        console.log(treeObj)

        var nodes = treeObj.getCheckedNodes(true);

        var pIds = []

        if (nodes.length == 0) {
           layer.msg("至少分配一个权限",{icon: 0, time: 1000})
            return false
        }

        $.each(nodes, function (index) {
            pIds.push(nodes[index].permissionId)
        })

        $("#permissionIds").val(pIds.toString())

        return true;
    }




</script>
<!--业务-->
<script type="text/javascript">
    $(function () {
        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });

        $("#form-role-add").validate({
            rules: {
                rolename: {
                    required: true
                }
            },
            success: "valid",
            messages: {
                rolename: {
                    required: "角色名称不能为空"
                }
            },
            submitHandler: function (form) {
                var res=saveOrUpdate();
               if (res){
                $(form).ajaxSubmit(function (data) {
                    layer.msg(data.msg, {icon: data.code, time: 1000}, function () {
                        //操作成功刷新数据
                        if (data.code == 1) {

                            //刷新父页面表格
                            parent.refresh();
                            //关闭窗口
                            parent.layer.closeAll();

                        }
                    });

                });
               }
            }
        });
    });

</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>